<!--
 @description 经销商解冻/冻结-详情
 @fileName index.vue
 @author zengqiongying
 @created 2023/04/17 10:42:06
-->
<template>
  <div :class="{ 'has-foot-pb': schedule === 'A' }">
    <DetailInfo :id="id" @data-change="onDataChange" />
    <div v-if="schedule === 'A'" class="ctm-content-foot">
      <div class="btn radius-larg ctm-btn-error" @click="onStop">终止</div>
      <div v-if="enbleEdit" class="btn radius-larg ctm-btn-main" @click="onEdit">编辑</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { ref, getCurrentInstance, computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useStore } from 'vuex'
  import DetailInfo from './components/DetailInfo.vue'
  import { stopCustomerChange } from '../mixins/Create'
  export default {
    name: 'DealerFreezeAndthawDetail',
    components: { DetailInfo },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const $store = useStore()
      const $router = useRouter()
      const $route = useRoute()
      const id = ref(`${$route.query.id || ''}`)
      const schedule = ref('')
      const reportType = ref('')

      const onEdit = () => {
        $router.push({
          path: '/dealerFreezeAndthaw/edit',
          query: {
            id: `${id.value}`
          }
        })
      }
      const onStop = () => {
        stopCustomerChange(id.value, () => {
          schedule.value = 'B'
        })
      }
      const onDataChange = (data: any) => {
        schedule.value = data?.schedule || ''
        reportType.value = data?.freezeDTO?.reportType || ''

        proxy.$SimpleEvents.emit('routeMetaTitle', data.type === 'F' ? '解冻详情' : '冻结详情')
      }
      const appRoleList = computed(() => {
        const user = $store.getters.userInfo || {}
        const roles = (user && user.appRoleDTOList) || []
        return roles.map((v: any) => v.roleName)
      })
      // 是否允许编辑
      const enbleEdit = computed(() => {
        // 客户经理只能对数据类型为“客户经理提报 A “的数据进行编辑；
        // 档案科只能对数据类型为“档案科提报 B ”的数据进行编辑；
        if (reportType.value === 'A') {
          return appRoleList.value.some((name: any) => name === 'CTM-客户经理角色')
        } else if (reportType.value === 'B') {
          return appRoleList.value.some((name: any) => name === 'CTM-档案科')
        }
        return false
      })

      return {
        id,
        schedule,
        reportType,
        onStop,
        onEdit,
        onDataChange,
        enbleEdit
      }
    }
  }
</script>
<style lang="less" scoped></style>
